// 引入广告页面的二级路由
// 和广告管理有关的功能都会放在这个控制器里
import advView from "@/adv.ejs";
import axios from "../api/index.js"; // 引入 api模块

let baseURL = axios.defaults.baseURL; //在路径前面拼接 /api 转发 图片地址的请求

//获取添加成功后的数据信息，渲染到页面上
async function getdata(res, p = 1) {
  //发送Ajax获取用户的信息
  //获取数据的时候根据页码来获取    默认给初始页面一个页码为 p=1
  let { data } = await axios.get("/adv/getdata", {
    params: {
      p,
    },
  });
  console.log(data);
  res.render(advView({ advs: data.advs, baseURL, pageCount: data.pageCount })); //需要等到获得数据后再渲染ejs
}

//绑定生成DOM节点之后的事件
async function advEvent(res) {
  // 点击添加用户
  // 一、点击按钮的时候 显示添加用户的对话框
  let addAdvBtn = document.querySelector(".addadv");
  let addadvmodelEle = document.querySelector(".adduermodel"); // 获取添加的对话框
  let maskEle = document.querySelector(".mask"); // 遮罩层元素
  addAdvBtn.onclick = function () {
    // 点击添加按钮的时候  让对话框和 遮罩层显示出来
    addadvmodelEle.style.display = "block";
    maskEle.style.display = "block";
  };
  // 二 点击 关闭的时候 关闭 对话框
  let closebtnEle = document.querySelector(".closebtn");
  closebtnEle.onclick = function () {
    addadvmodelEle.style.display = "none";
    maskEle.style.display = "none";
  };

  // 三 点击 提交按钮的时候  提交用户的信息 到后端。
  let imgFileEle = document.querySelector(".imgFile");
  let imgshowEle = document.querySelector(".imgshow");
  imgFileEle.onchange = function () {
    // input框发生改变的时候触发函数；
    // 获取上传的图片对象，通过 input.files
    console.log(this.files[0]);
    let imgObj = this.files[0];
    let filereader = new FileReader();
    filereader.readAsDataURL(imgObj);
    // 把图片对象转成url形式的数据，base64格式
    // 需要在filerader读完数据之后 获取base64
    filereader.onload = function () {
      // console.log(filereader.result);
      let myimg = new Image(); // 创建一个img 标签
      myimg.src = filereader.result; // 设置图片的路径地址是获取到的base64的路径
      myimg.style.width = "100px";
      myimg.style.height = "100px";
      imgshowEle.innerHTML = ""; // 清空每次显示在图片框里的图片，不然会累加
      imgshowEle.appendChild(myimg);
    };
  };
  //四 点击提交按钮的时候 发送ajax
  let submitBtn = document.querySelector(".btn");
  let advnameEle = document.querySelector(".username");
  submitBtn.onclick = async function () {
    let advname = advnameEle.value; //获取填入的广告的值
    //获取文件(图片等资源)对象
    let imgfile = imgFileEle.files[0]; // 文件对象
    // console.log(advname, imgfile);
    //表单的校验
    if (advname == "") {
      return alert("广告名称不能为空！");
    }
    // 文件不能是undefined
    if (typeof imgfile == "undefined") {
      return alert("图片不能为空！");
    }
    // FormData 一个预定义类
    let form = new FormData(); //创建实例 模拟一个空的form表单
    form.append("advname", advname); //第一个参数为键名，第二个参数为键值
    form.append("myimg", imgfile);
    // console.log(form);
    // 把form当成数据直接提交给后端 ，会自动设置请求头部信息
    let { data } = await axios.post("/adv/addadv", form);
    if (data.status == 1) {
      alert("添加成功");
      addadvmodelEle.style.display = "none"; //添加广告成功后隐藏对话框
      maskEle.style.display = "none";
      await getdata(res); // 添加用户成功后调用ajax 获取最新的数据，然后再渲染到页面上
      await advEvent(res); // 重新绑定事件，不然添加完一条数据后再次点击添加按钮无效
    }
  };

  //点击删除按钮删除广告，首先获取所有的删除按钮
  let delBtns = document.querySelectorAll(".delBtn");
  delBtns.forEach((btn) => {
    // 点击删除按钮的时候 获取点击按钮的数据id的值；发送ajax给后端携带id的值
    btn.onclick = async function () {
      let _id = this.getAttribute("advid"); // 获取当前数据的id(根据自定义属性获取)
      // console.log(_id);
      let answer = confirm("是否确定删除？");
      if (answer) {
        let { data } = await axios.delete("/adv/deladv", {
          params: {
            _id: _id,
          },
        });
        console.log(data); //打印后端返还的结果值
        if (data.status == 1) {
          await getdata(res); // 删除成功后重新渲染视图
          await advEvent(res); //删除成功后重新绑定事件
        } else {
          console.log(data);
        }
      }
    };
  });

  //分页
  let pageEles = document.querySelectorAll(".pageSwitch a");
  pageEles.forEach((pageEle) => {
    pageEle.onclick = async function (e) {
      e.preventDefault(); // 阻止 a的默认跳转行为
      let p = this.innerHTML; // 获取当前点击的页码
      console.log("(" + p.trim() + ")");
      p = p.trim(); //去掉前后的空格
      await getdata(res, p); // 点击页码后重新渲染视图
      await advEvent(res); //点击页码后重新绑定事件
    };
  });
}
export default function (router) {
  router.route("/admin/adv", async (req, res) => {
    await getdata(res); // 获取到数据后初次渲染视图
    await advEvent(res); //初次渲染视图后绑定事件
  });
}
